<template>
  <div class="content">
    <div class="header">超时未离场</div>
    <div class="body">
      <div id="gauge" style="width:120px;height:120px" />
      <table class="table" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>手机号</th>
            <th>用户当前工程角色</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.telephone }}</td>
            <td>{{ item.roleName }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>

import { notLeaveData } from '@/api/autonym'
export default {
  data() {
    return {
      tableData: [],
      count: 0,
      listQuery: {
        keyword: null,
        pageNum: 1,
        pageSize: 3
      }
    }
  },
  created() {},
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const res = await notLeaveData(this.listQuery)
      if (res.code === 200) {
        if (res.data) {
          if (res.data.list) {
            this.tableData = res.data.list.slice(0, 3)
            this.count = res.data.count
          }
        }
        this.$nextTick(function() {
          this.echartInit()
        })
      }
    },
    echartInit() {
      const myChart = this.$echarts.init(document.getElementById('gauge'))
      const option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },

        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: {
              formatter: '{value}人',
              offsetCenter: ['0', '50%'],
              textStyle: {
                fontSize: 14,
                color: '#FFFFFF'
              }
            },
            max: this.count,
            radius: '100%',
            data: [{ value: this.count }],
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              length: 15,
              lineStyle: {
                color: 'auto'
              }
            },
            axisLabel: {
              // 表盘上的刻度数值文字
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [this.tableData.length / this.count, '#F7B500'],
                  [1, '#313032']
                ]
              }
            },
            pointer: {
              show: true,
              width: '3',
              length: '60%'
            },
            itemStyle: {
              color: '#F7B500',
              borderWidth: 5
            }
          },
          {
            // 指针外环
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ['5%', '10%'],
            z: 10,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: this.count || 0,
                itemStyle: {
                  normal: {
                    color: '#F7B500'
                  }
                }
              }
            ]
          },
          {
            // 指针内环
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ['0%', '5%'],
            z: 10,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: this.count || 0,
                itemStyle: {
                  normal: {
                    color: '#313032'
                  }
                }
              }
            ]
          }
        ]
      }

      myChart.setOption(option, (window.onresize = myChart.resize))
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: 172px;
  padding: 16px;
  border-radius: 2px;
  border: 1px solid rgba(221, 221, 221, 0.2);
  .header {
    margin-bottom: 10px;
    .more {
      float: right;
      color: rgba(247, 181, 0, 1);
    }
  }
  .body {
    display: flex;
    padding-bottom: 20px;
    .table {
      margin-left: 40px;
      flex: 1;
      table-layout: fixed;
      tr {
        height: 30px;
        th,
        td {
          padding: 0 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      thead {
        background: rgba(247, 181, 0, 0.2);
        th {
          font-size: 13px;
          font-weight: normal;
          text-align: left;
        }
      }
      tbody {
        tr {
          &:nth-child(even) {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }
  }
}
</style>
